import React, { FC, useEffect, useState } from 'react'
import ChartPie from '@/components/pages/chartPie'
import SaleTow from '@/components/pages/saleTowPure'
import ChartColumn from '@/components/pages/chartColumnRevert'
import Bar from '@/components/pages/customer/bar'  
import ChartLine from '@/components/pages/chartLine'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { inject, observer, PropTypes } from "mobx-react"
import Title from '@/components/pages/title' 
import bg_verticle from '@/assert/images/backFrame.png'
import {IPurchaseGoodFull} from '@/types/pages/purchase/interface'
import imgtwo_url from '@/assert/images/img2.png'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    .top{
      flex:1 1 48%;
      display: flex;
      flex-direction: row;
      .sale{
        flex:1 1 33%; 
        padding:3rem;
        display: flex;
        flex-direction: column;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat; 
          .sale-content-top{
            flex:1 1 25%;    
          } 
        }
        .sale-content{
          flex:1 1 75%;   
          display: flex;
          flex-direction: column;  
          .content{
            flex:1 1 75%; 
            display: flex;
            flex-direction: row; 
            .sale-total{
            flex:1 1 30%; 
            margin: 1rem;
          }
          .sale-count,.sale-money{ 
            flex:1 1 30%;
            margin: 1rem;
          }
          } 
        } 
      }
      .species{
        flex:1 1 33%;
        position:relative;  
      }
      .money{
        flex:1 1 33%;
        position:relative;  
      } 
    }
    .bottom{
      flex:1 1 52%;
      display: flex;
      flex-direction: row;
      .chart-line{
        flex:1 1 50%; 
        display: flex;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      
      }
      .chart-colmn{
        flex:1 1 50%;  
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
`

const Content: FC<{}> = function () {
  const store = useStores();
  const {purchaseNum, purchaseNumPie, materialPie, purchaseTypePie,materialTop10Column, priceTop10Column} = store.purchaseGood.screenData;
  const fnCallBack: FnCallBack = (data: Partial<IPurchaseGoodFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('物资采购');
    document.title = '物资采购';
  };
  useEffect(() => {
    store.transportCosts.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.purchaseGood.getScreenData(type, date)
      fnCallBack<Partial<IPurchaseGoodFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='top'>
        <div className='sale'>
          <Title name="采购总额" style={{ paddingTop: '1rem' }} />
          <div className='sale-content-top'>
            <SaleTow {...purchaseNum} image={imgtwo_url} /> 
          </div> 
          <div className='sale-content'> 
            <ChartPie style={{backgroundImage:'none'}} title={purchaseNumPie.title!} dataset={purchaseNumPie.dataset} />
          </div>
        </div>
        <div className='species'><ChartPie title={materialPie.title!} dataset={materialPie.dataset} /></div>
        <div className='money'> <ChartPie title={purchaseTypePie.title!} dataset={purchaseTypePie.dataset!} /></div>
      </div>
      <div className='bottom'>
        <div className='chart-line' > <ChartColumn title={materialTop10Column.title!} dataset={materialTop10Column.dataset!} /></div>
        <div className='chart-colmn'><ChartColumn title={priceTop10Column.title!} dataset={priceTop10Column.dataset!} /></div>

      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
